/* Standard Styling */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  color: black;
}

a {
  cursor: pointer;
}

html {
  font-size: 14px;
  font-family: "Open Sans", Arial, sans-serif;
}

#selected {
  border-bottom: 2px solid rgba(100, 100, 100, .3);
  height: 3em;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(100, 100, 100, .1));
}

.highlight {
  color: rgb(66, 188, 245);
  cursor: pointer;
}

/* background */

.background {
  top: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url("/Pictures/forest.jpg");
  background-position: center;
  background-size: cover;
  z-index: -1;
  margin: 0;
}

.background::before {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  background-color: rgba(230, 230, 230, .9);
}

/* Navigation Bar */

nav {
  top: 0;
  left: 0;
  position: fixed;
  z-index: 999;
}

.navigation {
  display: block;
  position: fixed;
  width: 100%;
  background-color: rgba(180, 180, 180, .8);
  text-align: right;
}

.navigation li {
  display: inline-block;
  text-align: left;
}

.navigation li a {
  color: rgba(250, 250, 250, 1);
  margin-left: -5px;
  display: inline-block;
  line-height: 3em;
  padding: 0 25px;
  transition: .5s ease;
}

.navigation li a:hover {
  background-color: rgba(80, 80, 80, .15);
}

/* Navigation Dropdown Menu */

.navigation .dropdown ul {
  margin-left: -5px;
  display: none;
  position: absolute;
  background-color: rgba(180, 180, 180, .8);
}

.navigation .dropdown ul li {
  display: block;
}

.navigation .dropdown ul li a {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin: 0;
  width: 100%;
}

.navigation .dropdown:hover ul, .navigation .dropdown:active ul {
  display: block;
}

/* Content */

.content {
  position: relative;
  margin-top: 3em;
  width: 100%;
}

/* Footer */

.footer {
  display: flex;
  position: relative;
  width: 100%;
  background-color: rgba(230, 230, 230, .5);
  justify-content: center;
}

.footer ul {
  margin: 30px 0;
  list-style-type: none;
  width: 25vw;
}

.footer ul li:first-child {
  margin-bottom: 1em;
  font-weight: bold;
  color: black;
}

.footer ul li:first-child a {
  color: black;
}

.footer .contact li:nth-child(3), .footer .contact li:nth-child(5), .footer .contact li:nth-child(7), .footer .info li:nth-child(4), .footer .info li:nth-child(5), .footer .info li:nth-child(6) {
  margin-bottom: 1em;
}

.footer ul li {
  color: black;
  font-size: 12px;
}

.footer ul li a {
  color: rgba(255, 50, 50, .8);
  font-size: 12px;
}

.footer .logos .logo {
  background-size: contain;
  display: inline-block;
}

.footer .logos {
  text-align: center;
}

#logo1 {
  background-image: url("/Pictures/nobco-logo-voor-website.png");
  width: 140px;
  height: 100px;
}

#logo2 {
  background-image: url("/Pictures/emcc-logo-voor-website.png");
  width: 140px;
  height: 100px;
  margin-top: 1em;
}

#logo3 {
  background-image: url("/Pictures/schipaanpak-logo-website.jpg");
  width: 140px;
  height: 140px;
  margin-top: 1em;
}

#logo5 {
  background-image: url("/Pictures/CRKBO_Docent.jpg");
  width: 140px;
  height: 140px;
  margin-top: 1em;
}

#logo4 {
  background-image: url("/Pictures/global-code-of-ethics-logo-rgb.png");
  width: 140px;
  height: 32px;
  margin-top: 1em;
}

/* Responsive Design */

@media only screen and (max-width: 900px) {

  /* Standard Styling */

  html {
    font-size: 14px;
  }

  #selected {
    border-bottom: 1px solid rgba(255, 255, 255, .5);
  }

  /* Navigation */

  .navigation {
    top: 35px;
    display: none;
  }

  .navigation li {
    display: block;
  }

  .navigation li a {
    text-align: center;
    width: 100%;
  }

  .navigation .dropdown ul {
    width: 100%;
    position: relative;
    background-color: rgba(160, 160, 160, .8);
  }

  .navigation .dropdown:hover ul, .navigation .dropdown:active ul {
    display: none;
  }

  /* Navigation Burger */

  .burger-container {
    position: fixed;
    width: 100%;
    z-index: 999;
    top: 0;
  }

  .burger {
    transition: .5s ease;
    height: 35px;
    width: 35px;
    background-color: rgba(120, 120, 120, 0);
    cursor: pointer;
    z-index: 999;
  }

  .line {
    position: relative;
    background-color: rgba(160, 160, 160, .8);
    margin: 0 auto;
    width: 29px;
    height: 3px;
    margin-top: 10px;
    top: 3px;
  }

  .line:first-child {
    margin-top: 0;
  }

  .navigation li a {
    border-bottom: 1px solid rgba(255, 255, 255, .5);
  }

  .navigation li:first-child a {
    border-top: 1px solid rgba(255, 255, 255, .5);
  }

}

@media only screen and (max-width: 600px) {

  html {
    font-size: 12px;
  }
	
  #selected {
	  height: 4em;
	}
	
  .navigation li a {
	  line-height: 4em;
	}

  .footer {
    flex-direction: column;
  }

  .footer ul {
    width: 95vw;
    margin: 10px 0;
    overflow: hidden;
    text-align: center;
  }

  .footer {
    text-align: center;
  }

  .footer .logos {
    width: 90vw;
  }

  .footer .info, .footer .contact, .footer .logos {
    margin-top: 3em;
  }


}